<script lang="ts" setup>
    import topic from '@/components/topic.vue';
    import homepage from '@/components/homepage.vue';
    import focus from '@/components/focus.vue';

    import { Tab } from '~bootstrap'

    const tab : Ref<any> = ref(null)
    const pathTo : Ref<string> = ref('focus')
    const navTabs : Ref<InstanceType<typeof HTMLUListElement> | null> = ref(null)
    onMounted(async () => {
        tab.value = await getCurrentTab()
        console.log(tab.value.url)
    })
</script>

<template>
    <Suspense>
        <topic :url="tab?.url" />
        <!--
        <div>
            <ul class="nav nav-tabs position-absolute top-0" id="myTab" role="tablist" ref="navTabs">
                <li class="nav-item" role="presentation">
                    <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home-tab-pane"
                        type="button" role="tab" aria-controls="home-tab-pane" aria-selected="true">个人中心</button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="homepage-tab" data-bs-toggle="tab" data-bs-target="#homepage-tab-pane"
                        type="button" role="tab" aria-controls="homepage-tab-pane" aria-selected="false">用户</button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="topic-tab" data-bs-toggle="tab" data-bs-target="#topic-tab-pane"
                        type="button" role="tab" aria-controls="topic-tab-pane" aria-selected="false">帖子</button>
                </li>
            </ul>
            <div class="tab-content mt-3" id="myTabContent" v-if="tab">
                <div class="tab-pane fade active show" id="home-tab-pane" role="tabpanel" aria-labelledby="home-tab"
                    tabindex="0">
                    <focus :url="tab?.url"></focus>
                </div>
                <div class="tab-pane fade" id="homepage-tab-pane" role="tabpanel" aria-labelledby="homepage-tab"
                    tabindex="0">
                    <homepage :url="tab?.url"></homepage>
                </div>
                <div class="tab-pane fade" id="topic-tab-pane" role="tabpanel" aria-labelledby="topic-tab" tabindex="0">
                    <topic :url="tab?.url" />
                </div>
            </div>
        </div>
        -->
    </Suspense>
</template>

<style scoped>

</style>